<!--
 * @description 添加可同时使用的其他子账户
 * @author dumeng
 * @date 2021/7/28
 -->
<template>
  <div class="qtzzh-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <strong>请添加可同时使用子账户</strong>
        <el-button style="float: right;" type="primary" @click="addOtherAc">添加</el-button>
      </div>
      <el-row>
        <el-col class="tip" :span="24">扣款账户顺序设置：按住右侧拖动可以调整顺序</el-col>
        <draggable
          v-model="otherSubAcntTpList"
          :animation="340"
          handle=".drag-move"
          filter=".no-drag-item"
          draggable=".drag-item"
        >
          <el-col
            v-for="(item, index) in otherSubAcntTpList"
            :key="index"
            :span="24"
            class="images-item"
            :class="{'no-drag-item': !item, 'drag-item': item}"
          >
            <el-col :span="24" style="margin-bottom: 10px;">
              <el-button
                style="padding: 3px 0; font-size: 20px;margin-right: 10px;"
                type="text"
                icon="el-icon-close"
                @click="del(index)"
              />
              <el-input :value="`${otherSubAcntTpList[index]}-${otherSubAcntTpMap[otherSubAcntTpList[index]]}`" readonly style="display: inline-block; width: 80%;" />
              <el-tooltip class="item" effect="dark" content="拖动调整顺序" placement="top">
                <el-button
                  class="drag-move"
                  style="padding: 3px 0; font-size: 20px;margin-left: 10px;"
                  type="text"
                  icon="el-icon-rank"
                />
              </el-tooltip>
            </el-col>
          </el-col>
        </draggable>
      </el-row>
    </el-card>
    <el-dialog class="qtzzh-dialog" :close-on-click-modal="false" :visible.sync="visible" title="添加可同时使用职工子账户" fullscreen center>
      <section class="select-inner">
        <section class="main-table">
          <v-table :list="list" tag="accountmain" :list-loading="listLoading" :filter-column="filtercolumn" @handleSelectionChange="handleSelectionChange" />
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="padding: 8px 30px;" @click="handleSave">保 存</el-button>
        <el-button style="padding: 8px 30px;" @click="visible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { queryPage } from '@/views/welfare/accounttwo/api'
import draggable from 'vuedraggable'
import VTable from '@/components/Table'
export default {
  name: 'Index',
  components: { draggable, VTable },
  model: {
    prop: 'otherSubAc',
    event: 'changeAc'
  },
  props: {
    otherSubAc: {
      type: String,
      default: ''
    },
    // 职工福利子账户类型
    classifType2: {
      type: String,
      default: ''
    },
    otherSubAccountTypeMap: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      otherSubAcntTpList: [],
      otherSubAcntTpMap: [],
      list: [],
      listLoading: false,
      visible: false,
      selection: []
    }
  },
  watch: {
    otherSubAc: function(val) {
      this.otherSubAcntTpList = val.length ? val.split(',') : []
    },
    otherSubAcntTpList: function(val) {
      this.$emit('changeAc', val.join(','))
    },
    otherSubAccountTypeMap: function(val) {
      this.otherSubAcntTpMap = val || {}
    }
  },
  created() {
    this.otherSubAcntTpList = this.otherSubAc ? this.otherSubAc.split(',') : []
    this.otherSubAcntTpMap = this.otherSubAccountTypeMap || {}
  },
  methods: {
    addOtherAc() {
      this.getList().then(() => {
        this.visible = true
      })
    },
    del(i) {
      this.otherSubAcntTpList.splice(i, 1)
      this.$emit('changeAc', this.otherSubAcntTpList.join(','))
    },
    filtercolumn(scope, item) {
      if (item === 'subAcntSt') {
        return (scope.row[item] === 0 || scope.row[item] === '0') ? '可用' : '不可用'
      } else if (item === 'subAcntStartTm' || item === 'subAcntEndTm') {
        if (scope.row[item]) {
          return scope.row[item].replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6')
        } else {
          return ''
        }
      } else if (item === 'balance') {
        return scope.row[item] ? scope.row[item] : ''
      } else {
        return scope.row[item]
      }
    },
    getList() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        queryPage({ isOpen: 1 }).then(response => {
          this.list = response.data.data.filter(item => {
            return item.subAcntTp !== this.classifType2 && item.subAcntTp !== 'AC01'
          })
          this.listLoading = false
          resolve()
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },
    /**
     * 保存其他可用子账号
     */
    handleSave() {
      const list = this.selection.map(item => { return item.subAcntTp }).filter(ite => { return this.otherSubAcntTpList.indexOf(ite) === -1 })
      const listName = this.selection.filter(ite => { return list.indexOf(ite.subAcntTp) > -1 })
      const nameObj = {}
      listName.forEach(item => {
        nameObj[item.subAcntTp] = item.subAcntNm
      })
      this.otherSubAcntTpMap = { ...this.otherSubAcntTpMap, ...nameObj }
      const accStr = [...this.otherSubAcntTpList, ...list].join(',')
      this.$emit('changeAc', accStr)
      this.visible = false
    },
    handleSelectionChange(arr) {
      this.selection = arr
    }
  }
}
</script>

<style lang="scss">
.qtzzh-page{
  position: relative;
  margin-top: 20px;
  .el-card__header{
    padding-top: 8px;
    padding-bottom: 8px;
    strong{
      font-size: 16px;
    }
  }
  .el-card__body{
    padding-top: 0;
    .tip{
      height: 40px;
      line-height: 40px;
      color: #666;
    }
  }
  .qtzzh-dialog{
    .el-dialog__body {
      max-height: calc(100vh - 109px);
      min-height: calc(100vh - 109px);
      position: relative;
    }
  }
}
</style>
